<template>
	<view class="order">
		<view class="order-title">订单状态：{{detail.status_text}}</view>
		<view class="order-header">
			<view class="order-time">
				<view class="time-text">预约时间 </view>
				<view class="time-num">{{detail.status_text}}</view>
			</view>
			<view class="order-time" style="margin-top: 10px;">
				<view class="time-text">回收地址 </view>
				<view class="time-num">{{detail.province_text}}{{detail.city_text}}{{detail.area_text}}{{detail.street_text}}{{detail.address}}</view>
			</view>
		</view>
		<view class="stats-text"><text class="linepice"></text><text>回收类目</text>
		</view>
		<view class="order-subject">
			<view class="sub-item" v-for="(item,index) in detail.orderlog" :key="index">
				<view class="sub-child">
					<image :src="item.icon||'/static/img/feizhi.png'" class="sub-img"></image>
					<view class="sub-con">
						<view style="color: rgba(36, 36, 36, 1);font-size: 15px;font-weight: bold;">{{item.name}}</view>
						<view style="color: rgba(36, 36, 36, 1);padding-top: 12px;">单价：¥{{item.money}}/公斤</view>
						<view style="color: rgba(36, 36, 36, 1);">重量：{{item.ordertype}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sub-wrapper">
			<view class="sub-money">
				<view class="mon-title">商品总价：</view>
				<view class="mon-num"><text style="font-size: 13px;">≈¥</text>{{detail.total}}</view>
			</view>
			<view class="sub-eit" v-if="detail.info">
				<view class="eit-title">留言备注：</view>
				<view class="eit-text">{{detail.info}}</view>
			</view>
		</view>
		<view class="sub-info">
			<view style="color: rgba(36, 36, 36, 1);font-size: 14px;font-weight: bold;padding-bottom: 14px;">订单信息</view>
			<view style="color: rgba(120, 120, 120, 1);padding-bottom: 8px;">订单号：{{detail.ordersn}}</view>
			<view style="color: rgba(120, 120, 120, 1);padding-bottom: 8px;">下单时间：{{detail.created}}</view>
		</view>
	
	
		<view class="but-wrapper">
				<view class="od-count">
					<view class="con-text">合计总价：<text style="color: #FF6001;font-size: 18px;font-weight: bold;"><text style="font-size: 13px;">≈¥</text>{{detail.total}}</text></view>
				</view>
				<view class="but-ok" v-if="detail.status == 1" @click="cancleOrder()">
					<view class="ok-text">取消订单</view>
				</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				detail:''
			}
		},
		onLoad(options){
			if(options.id){
				this.id = options.id
			}
			this.getOrderDetail()
		},
		methods: {
			//订单详情
			getOrderDetail(){
				//orderdetail
				let params = {
					id:this.id
				}
				this.$http.order_detail(params).then(res => {
					this.detail = res.data
				})
			},
			//取消订单
			cancleOrder(){
				//orderdetail
				let params = {
					id:this.id
				}
				this.$http.order_cancel(params).then(res => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 0){
						this.getOrderDetail();
					}
				})
			},
          hanldConfim(){
			 uni.navigateTo({
			 	 url:'confirmReceipt'
			 })
		  }
		}
	}
</script>

<style scoped>
	.linepice{
		width: 24upx;height: 8upx;background: #2B2A29;border-radius: 8upx;display: block;margin-right: 5px;
	}
	.order {
		background-color: #F6F6F6;
		width: 100%;
		margin-bottom: 80px;
	}

	.order-title {
		color: rgba(36, 36, 36, 1);
		font-size: 15px;
		font-weight: bold;
		padding: 17px 0;
		text-align: center;
	}

	.order-header {
		background-color: #FFFFFF;
		padding: 15px 20px;
	}

	.man-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 14px;
	}

	.item-header {
		width: 80%;
	}

	.item-right {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 20%;
		justify-content: flex-end;
		color: rgba(70, 103, 240, 1);
		font-size: 15px;
		font-weight: bold;
	}

	.right-text {
		margin-left: 6px;
	}

	.item-right image {
		width: 24px;
		height: 24px;
		vertical-align: middle;
	}

	.item-add {
		color: #242424;
		font-size: 14px;
		font-weight: bold;
	}
	.eit-text{
		width: 510upx;
	}

	.order-time {
		display: flex;
		background-color: rgba(187, 187, 187, 0.1);
		padding: 13px 7px;
		border-radius: 5px;
		align-items: center;
	}

	.time-text {
		color: rgba(52, 54, 51, 1);
		font-size: 14px;
		min-width: 70px;
	}

	.time-num {
		color: rgba(36, 36, 36, 1);
		font-size: 15px;
		margin-left: auto;
		text-align: right;
		padding-left: 20px;
	}

	.stats-text {
		font-size: 17px;
		font-weight: bold;
		padding: 10px 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.stats-num {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.order-subject{
		display: flex;
		flex-direction: column;
	}
	.sub-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 20px;
		margin-bottom: 10px;
	}
	
	.sub-img{
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
	
		
	.sub-child{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}
	.sub-con{
		    flex: 1;
			padding-left: 16px;
	}
	.sub-wrapper{
		background-color: #FFFFFF;
		
	}
	.sub-money{
		padding: 17px 23px;
		border-bottom: 1px solid rgba(246, 246, 246, 1);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.mon-title{
		color: rgba(36, 36, 36, 1);
		font-size: 14px;
		font-weight: bold;
	}
	.mon-num{
		color: #FF6001;
		font-size: 18px;
		font-weight: bold;
	}
	.sub-eit{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 15px 23px 48px 23px;
	}
	.eit-title{
		color: rgba(36, 36, 36, 1);
		font-size: 14px;
		font-weight: bold;
		min-width: 80px;
	}
	.sub-info{
		background-color: #fff;
		margin-top: 10px;
		padding: 15px 20px;
	}
	.sub-but{
		width: 100%;
		height:108upx;
		
background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
box-shadow: 0px 4upx 8upx 0px #FFAB71;
		position: fixed;
		bottom: 0;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		line-height: 108upx;
		color: #FFFFFF;
	}
	
	/*已接单*/
	.but-con {
		display: flex;
		flex-direction: row;
		width: 208upx;
		height: 60upx;
		border-radius: 30upx;
		border: 1px solid rgba(52, 54, 51, 1);
		font-size: 14px;
		color: #242424;
		text-align: center;
		line-height: 60upx;
		align-items: center;
		justify-content: center;
	}
	
	.but-ok {
		width:200upx;
		height:60upx;
		border-radius:30upx;
		border:1px solid rgba(52,54,51,1);
		color: #343633;
		font-size: 14px;
		text-align: center;
		line-height: 60upx;
		margin-right: 20px;
	}
	
	.but-con image {
		width: 16px;
		height: 16px;
	}
	
	.con-text {
		padding-left: 4px;
		color: #343633;
		font-size: 15px;
		font-weight: bold;
	}
	
	.but-wrapper {
		     display: flex;
		     flex-direction: row;
		     justify-content: flex-end;
	
		     align-items: center;
		     position: fixed;
		     width: 100%;
		     bottom: 0;
		 
		     background-color: #fff;
		     height: 54px;
		     flex-direction: row;
		     justify-content: space-between;
	}
	
	.od-count{
		padding-left: 20px;
	}
</style>
